<template>
  <el-form label-width="100px">
    <el-form-item label="按钮文字">
      <el-input 
        :model-value="modelValue.text" 
        @update:model-value="updateProp('text', $event)" 
      />
    </el-form-item>
    
    <el-form-item label="按钮类型">
      <el-radio-group 
        :model-value="modelValue.type"
        @update:model-value="updateProp('type', $event)"
      >
        <el-radio-button label="primary">主要按钮</el-radio-button>
        <el-radio-button label="default">默认按钮</el-radio-button>
        <el-radio-button label="custom">自定义</el-radio-button>
      </el-radio-group>
    </el-form-item>

    <template v-if="modelValue.type === 'custom'">
      <el-form-item label="背景颜色">
        <el-color-picker 
          :model-value="modelValue.backgroundColor"
          @update:model-value="updateProp('backgroundColor', $event)"
          show-alpha 
        />
      </el-form-item>
      
      <el-form-item label="文字颜色">
        <el-color-picker 
          :model-value="modelValue.textColor"
          @update:model-value="updateProp('textColor', $event)"
          show-alpha 
        />
      </el-form-item>
      
      <el-form-item label="边框颜色">
        <el-color-picker 
          :model-value="modelValue.borderColor"
          @update:model-value="updateProp('borderColor', $event)"
          show-alpha 
        />
      </el-form-item>
    </template>

    <el-form-item label="按钮形状">
      <el-select 
        :model-value="modelValue.shape"
        @update:model-value="updateProp('shape', $event)"
        class="w-full"
      >
        <el-option label="默认" value="default" />
        <el-option label="圆角" value="round" />
        <el-option label="圆形" value="circle" />
      </el-select>
    </el-form-item>

    <el-form-item label="按钮尺寸">
      <el-select 
        :model-value="modelValue.size"
        @update:model-value="updateProp('size', $event)"
        class="w-full"
      >
        <el-option label="大" value="large" />
        <el-option label="默认" value="default" />
        <el-option label="小" value="small" />
      </el-select>
    </el-form-item>

    <el-form-item label="宽度设置">
      <el-radio-group 
        :model-value="modelValue.block"
        @update:model-value="updateProp('block', $event)"
      >
        <el-radio :label="true">撑满</el-radio>
        <el-radio :label="false">自适应</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
interface ButtonProps {
  text: string
  type: string
  backgroundColor: string
  textColor: string
  borderColor: string
  shape: string
  size: string
  block: boolean
}

const props = defineProps<{
  modelValue: ButtonProps
}>()

const emit = defineEmits(['update:modelValue'])

const updateProp = (key: keyof ButtonProps, value: any) => {
  emit('update:modelValue', {
    ...props.modelValue,
    [key]: value
  })
}
</script> 